---
title: Capture Plugin
description: Enables users to select a rectangular area on a page and export it as an image snapshot in Vue.
searchable: true
---

# Capture Plugin

The Capture Plugin provides a "snapshot" tool, allowing users to select a rectangular area (a marquee) on any page and export that specific section as a high-resolution image.

## Installation

This plugin depends on the `Render` and `Interaction Manager` plugins. You must install all three packages.

```sh npm2yarn
npm install @embedpdf/plugin-capture @embedpdf/plugin-render @embedpdf/plugin-interaction-manager
````

## Registration

Import `CapturePluginPackage` and its dependencies, then add them to the `plugins` array. The dependencies should be registered before the capture plugin.

```typescript {5, 18-22}
import { createPluginRegistration } from '@embedpdf/core'
// ... other imports
import { RenderPluginPackage } from '@embedpdf/plugin-render/vue'
import { InteractionManagerPluginPackage } from '@embedpdf/plugin-interaction-manager/vue'
import { CapturePluginPackage } from '@embedpdf/plugin-capture/vue'

const plugins = [
  // ... other essential plugins
  createPluginRegistration(LoaderPluginPackage, { /* ... */ }),
  createPluginRegistration(ViewportPluginPackage),
  createPluginRegistration(ScrollPluginPackage),

  // Register dependencies first
  createPluginRegistration(RenderPluginPackage),
  createPluginRegistration(InteractionManagerPluginPackage),

  // Register and configure the capture plugin
  createPluginRegistration(CapturePluginPackage, {
    scale: 2.0, // Render captured image at 2x resolution
    imageType: 'image/png',
    withAnnotations: true,
  }),
]
```

## Usage

The plugin works by combining a UI component to draw the selection area, a composable to control the capture mode, and an event listener to handle the final image.

### 1\. Add the `<MarqueeCapture />` Component

To enable the visual selection tool, place the `<MarqueeCapture />` component inside the `<Scroller />`'s default slot. It must be a child of `<PagePointerProvider>` to correctly handle mouse or touch interactions.

```vue {3, 16}
<script setup lang="ts">
import { PagePointerProvider } from '@embedpdf/plugin-interaction-manager/vue';
import { MarqueeCapture } from '@embedpdf/plugin-capture/vue';
</script>
<template>
  <Scroller>
    <template #default="{ page }">
      <PagePointerProvider
        :page-index="page.pageIndex"
        :page-width="page.width"
        :page-height="page.height"
        :rotation="page.rotation"
        :scale="page.scale"
      >
        <RenderLayer :page-index="page.pageIndex" />
        <MarqueeCapture :page-index="page.pageIndex" :scale="page.scale" />
      </PagePointerProvider>
    </template>
  </Scroller>
</template>
```

### 2\. Build a Toolbar Button

Use the `useCapture` composable to get access to the plugin's methods. The `toggleMarqueeCapture()` method activates and deactivates the selection mode.

```vue
<script setup lang="ts">
import { useCapture } from '@embedpdf/plugin-capture/vue';

const { provides: capture, isMarqueeCaptureActive } = useCapture();
</script>

<template>
  <button @click="capture?.toggleMarqueeCapture()">
    {{ isMarqueeCaptureActive ? 'Cancel' : 'Capture Area' }}
  </button>
</template>
```

### 3\. Handle the Captured Image

After the user selects an area, the plugin fires an event with the resulting image data. You must listen for this event using the `onCaptureArea` method to receive the `Blob`.

```vue
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { useCapture, type CaptureAreaEvent } from '@embedpdf/plugin-capture/vue';

const { provides: capture } = useCapture();
const imageUrl = ref<string | null>(null);
let unsubscribe: (() => void) | undefined;

onMounted(() => {
  if (!capture.value) return;
  unsubscribe = capture.value.onCaptureArea((result: CaptureAreaEvent) => {
    const newUrl = URL.createObjectURL(result.blob);
    imageUrl.value = newUrl;
  });
});

onUnmounted(() => {
  unsubscribe?.();
  if (imageUrl.value) URL.revokeObjectURL(imageUrl.value);
});
</script>

<template>
  <p v-if="!imageUrl">Select an area to capture.</p>
  <img v-else :src="imageUrl" alt="Captured PDF area" />
</template>
```

## Live Example

Click the "Capture Area" button, then click and drag a rectangle over the PDF. The selected area will appear below as an image, with a button to download it.

import { CaptureExample } from '../code-examples/capture-example';

<CaptureExample />

## API Reference

### Configuration (`CapturePluginConfig`)

| Option | Type | Description |
| :--- | :--- | :--- |
| **`scale`** | `number` | The resolution multiplier for the captured image. A value of `2` means 2x resolution. **Default**: `1` |
| **`imageType`** | `string` | The image format, e.g., `'image/png'`, `'image/jpeg'`. **Default**: `'image/png'` |
| **`withAnnotations`** | `boolean` | If `true`, annotations will be included in the captured image. **Default**: `false` |

### Component: `<MarqueeCapture />`

The component that renders the visual selection rectangle.

| Prop | Type | Description |
| :--- | :--- | :--- |
| **`pageIndex`** | `number` | **(Required)** The page index this component is rendered on. |
| **`scale`** | `number` | **(Required)** The current scale of the page. |
| **`class`** | `string` | Optional CSS class for custom styling of the marquee. |
| **`stroke`** | `string` | The color of the marquee's border. |
| **`fill`** | `string` | The background color of the marquee. |

### Composable: `useCapture()`

Connects your component to the capture plugin's state and functions.

#### Returns

| Property | Type | Description |
| :--- | :--- | :--- |
| **`provides`**| `Ref<CaptureCapability \| null>` | A ref object with methods to interact with the plugin, or `null` if not ready. |
| **`isMarqueeCaptureActive`**| `Ref<boolean>`| A reactive boolean that is `true` if marquee capture mode is active. |

#### `CaptureCapability` Methods

| Method | Description |
| :--- | :--- |
| **`toggleMarqueeCapture()`** | Toggles the marquee selection mode on or off. |
| **`onCaptureArea(callback)`** | Subscribes to the capture event. The callback receives a `CaptureAreaEvent` object. Returns an `unsubscribe` function. |
| **`captureArea(pageIndex, rect)`** | Programmatically captures a specified rectangular area on a page. |

### Event: `CaptureAreaEvent`

The object passed to the `onCaptureArea` callback after a successful capture.

| Property | Type | Description |
| :--- | :--- | :--- |
| **`pageIndex`** | `number` | The index of the page where the capture occurred. |
| **`rect`** | `Rect` | An object describing the position and size of the captured area in PDF points. |
| **`blob`** | `Blob` | The captured image data as a `Blob` object. |
| **`imageType`** | `string` | The MIME type of the captured image (e.g., `'image/png'`). |
| **`scale`** | `number` | The resolution scale factor used for the capture. |